<!--
 * @Author: 冕上 cxm66888@163.com
 * @Date: 2024-10-15 16:07:18
 * @LastEditors: 冕上 cxm66888@163.com
 * @LastEditTime: 2024-10-25 20:59:07
 * @Description: 
 * 
 * Copyright (c) 2024 by xiaoMing.Cao, All Rights Reserved. 
-->
<template>
  <div class="bottle-mian">
    <el-table :data="data.list" style="width: 100%">
      <el-table-column label="头像" width="180" style="display: flex; align-items: center">
        <template #default="scope">
          <el-avatar shape="square" :size="50" :src="scope.row.lastMessage.sender_avatarUrl" />
        </template>
      </el-table-column>
      <el-table-column prop="lastMessage.sender_nickname" label="昵称" width="180" />
      <el-table-column prop="unReadNumber" label="未读数量" />
      <el-table-column prop="lastMessage.content" label="最后一条消息" />
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button type="danger" @click="toDetail(scope.row)">回复他</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 15px" :size="parament.pageSize" :page-size="parament.pageSize" @change="pageChange" background layout="prev, pager, next" :total="data.total" />
  </div>
</template>

<script setup>
  import { onMounted, ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { getReplyBottleList } from '@/api/role';
  const router = useRouter();

  const data = reactive({
    // 真实瓶子
    list: [],
    form: {
      bottleStatus: '',
      bottleType: ''
    },
    total: 0
  });

  const parament = reactive({
    pageSize: 10,
    pageIndex: 1
  });

  const toDetail = item => {
    console.log(item);
    // 跳转到详情页
    router.push({ path: '/w_details/index', query: { id: item._id } });
  };

  const getList = () => {
    getReplyBottleList(parament).then(res => {
      if (res.code == 200) {
        data.list = res.data?.data ?? [];
        data.total = res.data?.total ?? 0;
      }
    });
  };

  const pageChange = item => {
    parament.pageIndex = item;
    getList();
  };

  getList();
</script>
<style scoped lang="scss">
  .bottle-mian {
    margin: 15px;
    background-color: #fff;
    padding: 15px;
  }
</style>
